<template>
  <div class="search">
    <el-card>
      <el-row>
        <el-col :span="16">
          <el-form :model="searchForm" inline :label-width="100" class="search-form" style="width: 80%">
            <el-form-item label="分类名称" prop="name">
              <el-input type="text" v-model="searchForm.name" clearable placeholder="请输入分类名称" style="width: 160px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <div>
            <el-button type="success" @click="showDialogAdd = true" style="margin-right: 80%" >添加分类</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%;" >
        <el-table-column fixed prop="id" label="分类id" width="300" />
        <el-table-column prop="parentId" label="父级分类id" width="300" />
        <el-table-column prop="name" label="分类名称" width="300" />
        <el-table-column prop="createTime" label="创建时间" width="300" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="toChangeCategory(scope.row)"
            >编辑</el-button>
            <el-button link type="danger" size="small" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" @pagination="getPage" :limit="pageSize"></pagination>
    </el-card>
  </div>

  <!--分类添加-->
  <el-dialog v-model="showDialogAdd" itle="新增分类" width="32%" center>
    <div class="addressWrapper">
      <div style="text-align: center;margin-bottom:5%">
        <h2>添加分类</h2>
      </div>
      <el-form :model="categoryForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 450px">
        <el-form-item label="父级分类" prop="parentId">
          <el-select v-model="categoryForm.parentId"  style="width: 200px">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="name" >
          <el-input v-model="categoryForm.name" placeholder="请填写分类名"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="showDialogAdd=false">取消</el-button>
      <el-button type="primary" @click="addCategory">确定</el-button>
    </span>
    </template>
  </el-dialog>

  <!--分类编辑-->
  <el-dialog v-model="showDialogChange" itle="分类修改" width="32%" center>
    <div class="addressWrapper">
      <div style="text-align: center;margin-bottom:5%">
        <h2>分类信息修改</h2>
      </div>
      <el-form :model="changeForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 450px">
        <el-form-item label="父级分类" prop="parentId">
          <el-select v-model="changeForm.parentId"  style="width: 200px">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类名" prop="name">
          <el-input v-model="changeForm.name" placeholder="请填写分类名"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="showDialogChange=false">取消</el-button>
      <el-button type="primary" @click="changeCategory">确定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script  setup>
import {onMounted, reactive, ref} from "vue";
import Pagination from "@/components/Pagination/index.vue";
import { ElMessage } from "element-plus";
import 'element-plus/theme-chalk/el-message.css'
import {Plus} from "@element-plus/icons";
import {
  addCategoryAPI,
  deleteCategoryAPI,
  getCategoryAPI,
  getParentNameAPI, updateCategoryAPI
} from "@/api/categoryManage.js";
import {updateBasicAPI} from "@/api/brandManage.js";
const current = ref(1)
const pageSize = ref(10)
const total = ref(100)
const categoryList = ref([{
  id:'',
  name:''
}])
//添加dialog
const showDialogAdd = ref(false)
//修改dialog
const showDialogChange = ref(false)

const tableData = ref([
  {
    id: '',
    parentId: '',
    name: '',
    createTime:''
  }
])
//添加form
const categoryForm = ref({
  parentId: '',
  name: '',
})

//修改form
const changeForm = ref({
  id:'',
  parentId:'',
  name: '',
})
//查询form
const searchForm = reactive({
  name:null
})
const getPage = (params) => {
  current.value = params.page
  pageSize.value = params.limit
  if(searchForm){
    onSubmit()
  }else{
    getCategory()
  }

}
//条件搜索
const onSubmit = async ()=>{
  const name = searchForm.name
  const params = ref({
    name:name,
    current:current.value,
    pageSize:pageSize.value
  })
  const res = await getCategoryAPI(params.value);
  tableData.value = res.data.records
  total.value = res.data.total
}
//点击编辑显示
const toChangeCategory = async (row) => {
  //查询分类信息
  changeForm.value  = row
  showDialogChange.value = true
}

/*分类添加数据校验*/
const rules = {
  parentId: [
    {required: true, message: '所属分类不能为空', trigger: 'blur'}
  ],
  name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
}
const formRef = ref({})
const addCategory = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = await addCategoryAPI(categoryForm.value)
      if (res.data) {
        showDialogAdd.value=false
        await getCategory()
        ElMessage.success("添加成功")
      }
    }

  })
}
//分类信息修改
const changeCategory = async () => {
  const res = await updateCategoryAPI(changeForm.value)
  if(res.data){
    await getCategory()
    showDialogChange.value=false
    ElMessage.success("修改成功")
  }
}

//分类删除
const deleteRow = async (row) => {
  const res = await deleteCategoryAPI(row.id)
  if(res.data){
    await getCategory()
    ElMessage.success("删除成功");
  }
}
//初始化挂载
const getCategory = async ()=>{
  const res = await getCategoryAPI({current:current.value,pageSize:pageSize.value});
  tableData.value = res.data.records
  total.value = res.data.total
}
onMounted(() => getCategory())
const getParentName = async ()=>{
  const res = await getParentNameAPI()
  categoryList.value = res.data
  //如果是一级分类，id是0，这里手动添加进去
  categoryList.value.push({name:"无",id:"0"})
}
onMounted(() => getParentName())

</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<style scoped>

.search {
  .oss-operation {
    margin-bottom: 2vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    button {
      margin-right: 5px;
    }
  }
}
</style>